import React, { useEffect } from 'react';
import {Select, Upload,Radio , Form, Input, Modal} from 'antd';

import { String } from 'lodash';

const { Option } = Select;

const FormItem = Form.Item;

import styles from '../index.less';

export interface TabsFormProps {
    modalVisible: boolean;
    tabvalue?:object;
    attrlist:API.SysDeviceAttrItem[];
    values?: any;
    onSubmit: (values: String) => void;
    onCancel: () => void;
  }
  
const formLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
  };

const AddTabs: React.FC<TabsFormProps> = (props) => {
 
    const [form] = Form.useForm();
    const { modalVisible, onSubmit: handleAdd, onCancel,attrlist } = props;
   


    const okHandle = async () => {
      const fieldsValue = await form.validateFields();
      form.resetFields();
      handleAdd(fieldsValue);
    }
      
      

    const changeFileds = async (value,values) =>  
    {
      let  browseNames=[];
       for(let i=0;i<values.length;i++){
        browseNames.push(values[i].children);
       }
       form.setFieldsValue({"browseNames":browseNames});
    }
         
    return (
        <Modal
          width={640}
          maskClosable={false}
          destroyOnClose
          title="新增tabs"
          visible={modalVisible}
          onOk={okHandle}
          onCancel={() => onCancel()}
          className={styles.tab}
        >
          <Form
            {...formLayout}
            initialValues={{chartType:'line'}}
            form={form}
          >
             <FormItem
              name="browseNames"
              hidden={true}>
              <Input  />
            </FormItem>
            <FormItem
              label="tab名称"
              name="label"
              rules={[{ required: true}]}
            >
              <Input placeholder="请输入" autoComplete='off' />
            </FormItem>
            <FormItem
              label="选择字段"
              name="filed"
              rules={[{ required: true}]}
            >
              <Select placeholder="请选择"   mode="multiple"  onChange={changeFileds}
               allowClear >
                          {attrlist.map((item,index) => (
                            <Option key={item.attrId} value={item.dispalyName}>
                              {item.browseName}
                            </Option>
                        ))}
                          </Select>
            </FormItem>
            <FormItem
              label="图标颜色"
              name="colors"
              rules={[{ required: true}]}
            >
              <Input placeholder="请输入图标颜色多个色值用,隔开例 #000,#333" autoComplete='off' />
            </FormItem>
            <FormItem
              label="图标类型"
              name="chartType"
              rules={[{ required: true}]}
            >
          <Radio.Group >
            <Radio value={'bar'}>
              柱状图
            </Radio>
            <Radio value={'line'} >
              折线图
            </Radio>
            
          </Radio.Group>
        </FormItem>        
     
          </Form>
        </Modal>
      );
};

export default AddTabs;